import React, { Component } from 'react';
import { List } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
require('isomorphic-fetch');
import './index.scss';

class Detail extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: getRandomDataSource(25)
        };
    }

    refresh() {
        fetch("http://oyob4lzlj.bkt.clouddn.com/data1.json")
        .then((res)=> {
           return res.json();
          console.log(res.json());
        })
        .then((res) =>{
           this.setState({
               
               dataSource:res.project
           })
        });
    }
    
   
    componentWillMount(){
        fetch("http://oyob4lzlj.bkt.clouddn.com/data1.json")
        .then((res)=> {
           return res.json();
          console.log(res.json());
        })
        .then((res) =>{
           this.setState({
               
               dataSource:res.project
           })
        });
    }
    fetch() {
        
        fetch("http://oyob4lzlj.bkt.clouddn.com/data1.json")
        .then((res)=> {
           return res.json();
          console.log(res.json());
        })
        .then((res) =>{
           this.setState({
               
               dataSource:res.project
           })
        });
        
    }

    render() {
        return (
            <div className="yo-flex">
                <Header title="项目" />
                
                <List
                    ref="list"
                    extraClass="flex m-list"
                    dataSource={this.state.dataSource}
                    renderItem={(item, i) => 
                        
                        <ul className="yo-list">
                            <li className="item demo-list-item">
                                <div className="wrapper">
                                    <a className="img-wrap">
                                        <img  src={item.image} />
                                    </a>
                                    <div className="comment-wrap">
                                        <h2 className="comment-title ellipsis">{item.title}</h2>
                                        <p className="comment-detail ellipsis">{item.description}</p>
                                        <div className="tags ellipsis">{item.detail}</div>
                                    </div>
                                </div>
                            </li>

                        </ul>

                    }

                    infinite={true}
                    infiniteSize={20}
                    itemHeight={null}
                    usePullRefresh={true}
                    onRefresh={() => {
                        setTimeout(() => {
                            this.refresh();
                            this.refs.list.stopRefreshing(true);
                        }, 500);
                    }}
                    useLoadMore={true}
                    onLoad={() => {
                        setTimeout(() => {
                            this.fetch();
                            this.refs.list.stopLoading(true);
                        }, 500);
                    }}
                    itemExtraClass={(item, i) => {
                        return 'item ' + i;
                    }}
                   
                />
                <Footer/>
            </div>
        )
    }
}

let guid = -1;

function getArrayByLength(length) {
    var ret = [];
    for (var i = 0; i < length; i++) {
        ret[i] = null;
    }
    return ret;
}

function getRandomList(size) {
    return getArrayByLength(size).fill(1).map(num => parseInt(Math.random() * 100));
}

function getRandomDataSource(size) {
    return getRandomList(size).map(num => ({ text: num, key: ++guid }));
}


export default Detail;
